<!DOCTYPE html>
<!-- saved from url=(0047)http://www.jeasyui.com/documentation/panel.php# -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
		<meta name="keywords" content="jquery,ui,easy,easyui,web framekwork,ajax framekwork,ria,web development">
		<meta name="description" content="easyui help you build your web page easily!">
		<title>panel - Documentation - jQuery EasyUI</title>
        <link rel="stylesheet" href="cssandjs/main.css" type="text/css">
		<link type="text/css" rel="stylesheet" href="cssandjs/SyntaxHighlighter.css">
		<script src="cssandjs/shCore.js"></script>
		<script src="cssandjs/shBrushJScript.js"></script>
		<script src="cssandjs/shBrushXml.js"></script>
	<style type="text/css">.dp-xml .cdata { color: #ff1493; }.dp-xml .tag, .dp-xml .tag-name { color: #069; font-weight: bold; }.dp-xml .attribute { color: red; }.dp-xml .attribute-value { color: blue; }</style></head>
	<body>
		<div id="header">
						<div id="header-inner">
				<table cellpadding="0" cellspacing="0" style="width:100%;">
					<tbody><tr>
						<td rowspan="2" style="width:20px;">
						</td>
						<td style="height:52px;">
							<div style="color:#fff;font-size:22px;font-weight:bold;">
								<a href="http://www.jeasyui.com/index.php" style="color:#fff;font-size:22px;font-weight:bold;text-decoration:none">jQuery EasyUI</a>
							</div>
							<div style="color:#fff">
								<a href="http://www.jeasyui.com/index.php" style="color:#fff;text-decoration:none">easyui help you build your web page easily!</a>
							</div>
						</td>
						<td style="padding-right:5px;text-align:right;vertical-align:bottom;">
							<div id="topmenu">
								<a href="http://www.jeasyui.com/index.php">Home</a>
								<a href="http://www.jeasyui.com/demo/index.php">Demo</a>
								<a href="http://www.jeasyui.com/tutorial/index.php">Tutorial</a>
								<a href="http://www.jeasyui.com/documentation/index.php">Documentation</a>
								<a href="http://www.jeasyui.com/download/index.php">Download</a>
								<a href="http://www.jeasyui.com/extension/index.php">Extension</a>
								<a href="http://www.jeasyui.com/contact.php">Contact</a>
								<a href="http://www.jeasyui.com/forum/index.php">Forum</a>
							</div>
						</td>
					</tr>
				</tbody></table>
			</div>
			
		</div>
		<div id="mainwrap">
			<div id="content">
			

<div style="padding:10px">

<h3>Panel</h3>
<p>Override defaults with $.fn.panel.defaults.</p>
<img src="cssandjs/panel.png">

<h4>Usage Example</h4>

<h5>Create Panel</h5>
<p>1. Create Panel via markup</p>
<p>Creation from markup is even easier. Add 'easyui-panel' class to &lt;div/&gt; markup.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"p"</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-panel"</span><span>&nbsp;</span><span class="attribute">title</span><span>=</span><span class="attribute-value">"My&nbsp;Panel"</span><span>&nbsp;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:500px;height:150px;padding:10px;background:#fafafa;"</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="attribute">iconCls</span><span>=</span><span class="attribute-value">"icon-save"</span><span>&nbsp;&nbsp;</span><span class="attribute">closable</span><span>=</span><span class="attribute-value">"true"</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="attribute">collapsible</span><span>=</span><span class="attribute-value">"true"</span><span>&nbsp;</span><span class="attribute">minimizable</span><span>=</span><span class="attribute-value">"true"</span><span>&nbsp;</span><span class="attribute">maximizable</span><span>=</span><span class="attribute-value">true</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>panel&nbsp;content.</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>panel&nbsp;content.</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea name="code-panel" class="html" style="display: none; ">	&lt;div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;"
			iconCls="icon-save"  closable="true"
			collapsible="true" minimizable="true" maximizable=true&gt;
		&lt;p&gt;panel content.&lt;/p&gt;
		&lt;p&gt;panel content.&lt;/p&gt;
	&lt;/div&gt;
</textarea>

<p>2. Create Panel programatically</p>
<p>Let's create panel with tools on top right.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>&lt;div&nbsp;id=</span><span class="string">"p"</span><span>&nbsp;style=</span><span class="string">"padding:10px;"</span><span>&gt;&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;panel&nbsp;content.&lt;/p&gt;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;panel&nbsp;content.&lt;/p&gt;&nbsp;&nbsp;</span></li><li class=""><span>&lt;/div&gt;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span>$(<span class="string">'#p'</span><span>).panel({&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;width:500,&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;height:150,&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;title:&nbsp;<span class="string">'My&nbsp;Panel'</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;tools:&nbsp;[{&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;iconCls:<span class="string">'icon-add'</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;handler:<span class="keyword">function</span><span>(){alert(</span><span class="string">'new'</span><span>)}&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;},{&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;iconCls:<span class="string">'icon-save'</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;handler:<span class="keyword">function</span><span>(){alert(</span><span class="string">'save'</span><span>)}&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;}]&nbsp;&nbsp;</span></li><li class="alt"><span>});&nbsp;&nbsp;&nbsp;</span></li></ol></div><textarea name="code-panel" class="js" style="display: none; ">	&lt;div id="p" style="padding:10px;"&gt;
		&lt;p&gt;panel content.&lt;/p&gt;
		&lt;p&gt;panel content.&lt;/p&gt;
	&lt;/div&gt;
	
	$('#p').panel({
	  width:500,
	  height:150,
	  title: 'My Panel',
	  tools: [{
		iconCls:'icon-add',
		handler:function(){alert('new')}
	  },{
		iconCls:'icon-save',
		handler:function(){alert('save')}
	  }]
	});	
</textarea>

<br>
<h5>Move Panel</h5>
<p>Call 'move' method to move panel to a new position</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">'#p'</span><span>).panel(</span><span class="string">'move'</span><span>,{&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;left:100,&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;top:100&nbsp;&nbsp;</span></li><li class=""><span>});&nbsp;&nbsp;&nbsp;</span></li></ol></div><textarea name="code-panel" class="js" style="display: none; ">	$('#p').panel('move',{
	  left:100,
	  top:100
	});	
</textarea>

<br>
<h5>Load Content</h5>
<p>Let's load the panel content via ajax and show some message when loaded successfully.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">'#p'</span><span>).panel({&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;href:<span class="string">'content_url.php'</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;onLoad:<span class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(<span class="string">'loaded&nbsp;successfully'</span><span>);&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class=""><span>});&nbsp;&nbsp;</span></li></ol></div><textarea name="code-panel" class="js" style="display: none; ">	$('#p').panel({
		href:'content_url.php',
		onLoad:function(){
			alert('loaded successfully');
		}
	});
</textarea>

<p>&nbsp;</p>
<h4>Properties</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>
<th><strong>Description</strong></th>

<th><strong>Default</strong></th>
</tr>
<tr>
<td>title</td>
<td>string</td>
<td>The title text to display in panel header.</td>
<td>null</td>
</tr>
<tr>
<td>iconCls</td>
<td>string</td>

<td>A CSS class to display a 16x16 icon in panel.</td>
<td>null</td>
</tr>
<tr>
<td>width</td>
<td>number</td>
<td>Set the panel width.</td>
<td>auto</td>
</tr>
<tr>
<td>height</td>

<td>number</td>
<td>Set the panel height.</td>
<td>auto</td>
</tr>
<tr>
<td>left</td>
<td>number</td>
<td>Set the panel left position.</td>
<td>null</td>
</tr>

<tr>
<td>top</td>
<td>number</td>
<td>Set the panel top position.</td>
<td>null</td>
</tr>
<tr>
<td>cls</td>
<td>string</td>
<td>Add a CSS class to the panel.</td>

<td>null</td>
</tr>
<tr>
<td>headerCls</td>
<td>string</td>
<td>Add a CSS class to the panel header.</td>
<td>null</td>
</tr>
<tr>
<td>bodyCls</td>
<td>string</td>

<td>Add a CSS class to the panel body.</td>
<td>null</td>
</tr>
<tr>
<td>style</td>
<td>object</td>
<td>Add a custom specification style to the panel.</td>
<td>{}</td>
</tr>
<tr>
<td>fit</td>

<td>boolean</td>
<td>When true to set the panel size fit it's parent container.</td>
<td>false</td>
</tr>
<tr>
<td>border</td>
<td>boolean</td>
<td>Defines if to show panel border.</td>
<td>true</td>
</tr>

<tr>
<td>doSize</td>
<td>boolean</td>
<td>If set to true,the panel will be resize and do layout when created.</td>
<td>true</td>
</tr>
<tr>
<td>noheader</td>
<td>boolean</td>
<td>If set to true, the panel header will not be created.</td>

<td>false</td>
</tr>
<tr>
<td>content</td>
<td>string</td>
<td>The panel body content.</td>
<td>null</td>
</tr>
<tr>
<td>collapsible</td>
<td>boolean</td>

<td>Defines if to show collapsible button.</td>
<td>false</td>
</tr>
<tr>
<td>minimizable</td>
<td>boolean</td>
<td>Defines if to show minimizable button.</td>
<td>false</td>
</tr>
<tr>
<td>maximizable</td>

<td>boolean</td>
<td>Defines if to show maximizable button.</td>
<td>false</td>
</tr>
<tr>
<td>closable</td>
<td>boolean</td>
<td>Defines if to show closable button.</td>
<td>false</td>
</tr>

<tr>
<td>tools</td>
<td>array,selector</td>
<td>
Custom tools, possible values:<br>
1) an array, each element contains iconCls and handler properties. <br>
2) a selector that indicating the tools<br>
</td>
<td>[]</td>
</tr>
<tr>
<td>collapsed</td>
<td>boolean</td>
<td>Defines if the panel is collapsed at initialization.</td>

<td>false</td>
</tr>
<tr>
<td>minimized</td>
<td>boolean</td>
<td>Defines if the panel is minimized at initialization.</td>
<td>false</td>
</tr>
<tr>
<td>maximized</td>
<td>boolean</td>

<td>Defines if the panel is maximized at initialization.</td>
<td>false</td>
</tr>
<tr>
<td>closed</td>
<td>boolean</td>
<td>Defines if the panel is closed at initialization.</td>
<td>false</td>
</tr>
<tr>
<td>href</td>

<td>string</td>
<td>A URL to load remote data and then display in the panel.</td>
<td>null</td>
</tr>
<tr>
<td>cache</td>
<td>boolean</td>
<td>True to cache the panel content that loaded from href.</td>
<td>true</td>
</tr>

<tr>
<td>loadingMessage</td>
<td>string</td>
<td>When loading remote data show a message in the panel.</td>
<td>Loading…</td>
</tr>
<tr>
<td>extractor</td>
<td>function</td>
<td>
Defines how to extract the content from ajax response, return extracted data.
<pre>extractor: function(data){
	var pattern = /&lt;body[^&gt;]*&gt;((.|[\n\r])*)&lt;\/body&gt;/im;
	var matches = pattern.exec(data);
	if (matches){
		return matches[1];	// only extract body content
	} else {
		return data;
	}
}
</pre>
</td>
<td></td>
</tr>
</tbody></table>

<h4>Events</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameters</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>onLoad</td>
<td>none</td>
<td>Fires when remote data is loaded.</td>

</tr>
<tr>
<td>onBeforeOpen</td>
<td>none</td>
<td>Fires before panel is opened, return false to stop the open.</td>
</tr>
<tr>
<td>onOpen</td>
<td>none</td>
<td>Fires after panel is opened.</td>
</tr>

<tr>
<td>onBeforeClose</td>
<td>none</td>
<td>Fires before panel is closed, return false to cancel the close.</td>
</tr>
<tr>
<td>onClose</td>
<td>none</td>
<td>Fires after panel is closed.</td>
</tr>
<tr>

<td>onBeforeDestroy</td>
<td>none</td>
<td>Fires before panel is destroyed, return false to cancel the destroy.</td>
</tr>
<tr>
<td>onDestroy</td>
<td>none</td>
<td>Fires after panel is destroyed.</td>
</tr>
<tr>
<td>onBeforeCollapse</td>

<td>none</td>
<td>Fires before panel is collapsed, return false to stop the collapse.</td>
</tr>
<tr>
<td>onCollapse</td>
<td>none</td>
<td>Fires after panel is collpased.</td>
</tr>
<tr>
<td>onBeforeExpand</td>
<td>none</td>

<td>Fires before panel is expanded, return false to stop the expand.</td>
</tr>
<tr>
<td>onExpand</td>
<td>none</td>
<td>Fires after panel is expanded.</td>
</tr>
<tr>
<td>onResize</td>
<td>width, height</td>
<td>Fires after panel is resized.<br>

width: the new outer width<br>
height: the new outer height</td>
</tr>
<tr>
<td>onMove</td>
<td>left,top</td>
<td>Fires after panel is moved.<br>
left: the new left postion<br>
top: the new top position</td>
</tr>

<tr>
<td>onMaximize</td>
<td>none</td>
<td>Fires after the window has been maximized.</td>
</tr>
<tr>
<td>onRestore</td>
<td>none</td>
<td>Fires after the window has been restored to its original size.</td>
</tr>
<tr>

<td>onMinimize</td>
<td>none</td>
<td>Fires after the window has been minimized.</td>
</tr>
</tbody></table>

<h4>Methods</h4>
<table class="doc-table">

<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameter</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>options</td>
<td>none</td>
<td>Return options property.</td>
</tr>
<tr>

<td>panel</td>
<td>none</td>
<td>Return the panel object.</td>
</tr>
<tr>
<td>header</td>
<td>none</td>
<td>Return the panel header object.</td>
</tr>
<tr>
<td>body</td>

<td>none</td>
<td>Return the panel body object.</td>
</tr>
<tr>
<td>setTitle</td>
<td>title</td>
<td>Set the title text of header.</td>
</tr>
<tr>
<td>open</td>
<td>forceOpen</td>

<td>When forceOpen parameter set to true, the panel is opened bypass the onBeforeOpen callback.</td>
</tr>
<tr>
<td>close</td>
<td>forceClose</td>
<td>When forceClose parameter set to true, the panel is closed bypass the onBeforeClose callback.</td>
</tr>
<tr>
<td>destroy</td>
<td>forceDestroy</td>
<td>When forceDestroy parameter set to true, the panel is destroyed bypass the onBeforeDestroy callback.</td>

</tr>
<tr>
<td>refresh</td>
<td>href</td>
<td>Refresh the panel to load remote data when href property is setted.</td>
</tr>
<tr>
<td>resize</td>
<td>options</td>
<td>Set panel size and do layout. The options object contains following properties:<br>
width: the new panel width<br>

height: the new panel height<br>
left: the new panel left position<br>
top: the new panel top position</td>
</tr>
<tr>
<td>move</td>
<td>options</td>
<td>Move the panel to a new position. The options object contains following properties:<br>
left: the new panel left position<br>
top: the new panel top position</td>

</tr>
<tr>
<td>maximize</td>
<td>none</td>
<td>Fits the panel winthin its container.</td>
</tr>
<tr>
<td>minimize</td>
<td>none</td>
<td>Minimizing the panel.</td>
</tr>

<tr>
<td>restore</td>
<td>none</td>
<td>Restores the maximized panel back to its original size and position.</td>
</tr>
<tr>
<td>collapse</td>
<td>animate</td>
<td>Collapses the panel body.</td>
</tr>
<tr>

<td>expand</td>
<td>animate</td>
<td>Expand the panel body.</td>
</tr>
</tbody></table>

</div>

